<html>
    <head>
        <title>
           麻将模型
        </title>
        <style>
            body {
                display:block;
                width:500px;
	            height:700px;
                padding:  50px 25px 25px 50px;
	            border-width:10px;
	            border-style:solid;
	            border-color:pink;
		
		margin: 0 auto;
                
            }
            .one{
                display:block;
                width: 150px;
	            height:200px;
	            border-width:2px;
	            border-style:solid;
	            border-color:rgb(14, 14, 14);
                float: left;
                border-radius: 10%;
                background-color:rgba(252, 250, 250, 0.995)
            }
            .two{
                background-color:rgb(52, 163, 73);
		        width: 80px;
		        height:80px;
                margin: 60px 35px 60px  35px;
		        border-radius: 50%;
                text-align: center;
            }
            .three{
                background-color:rgb(64, 64, 101);
		        width: 50px;
		        height:50px;
                
		        border-radius: 50%;
            }
            .four{
                background-color:rgb(52, 163, 73);
		        width: 50px;
		        height:50px;               
		        border-radius: 50%;
            }
            .five{
                background-color:rgb(211, 30, 30);
		        width: 50px;
		        height:50px;               
		        border-radius: 50%
            }
            .six{
                background-color:rgb(64, 64, 101);
		        width: 45px;
		        height:45px;
                
		        border-radius: 50%;}
                .eight{
                    background-color:rgb(52, 163, 73);
		        width: 45px;
		        height:45px;               
		        border-radius: 50%;
                }
                .nine{
                    background-color:rgb(211, 30, 30);
		        width: 45px;
		        height:45px;               
		        border-radius: 50%
            }
                }
        </style>
    </head>
        <body>
	<h1 style="color:darkblue;text-align:center;">麻将模型</h1>
            <div class="one">
                <div class="two"></div>
            </div>
            <div class="one">
                <div class="three"style="margin: 40px 50px 110px  50px;position:absolute;"></div>
                <div class="four" style=" margin: 110px 50px 40px  50px;position:absolute;"></div>
            </div>
            <div class="one" >
                <div class="three" style=" margin: 20px 90px 130px  10px;position:absolute;"></div>
                <div class="five" style=" margin: 80px 50px 70px  50px;position:absolute;"></div>
                <div class="four" style=" margin: 140px 10px 10px  90px;position:absolute;"></div>
            </div>
            <div class="one">
                <div class="four" style=" margin: 30px 80px 120px  20px; position: absolute;"></div>
                <div class="three" style=" margin: 30px 20px 120px  80px;position:absolute; "></div>
                <div class="three" style=" margin: 120px 80px 30px  20px;position:absolute; "></div>
                <div class="four" style=" margin: 120px 20px 30px  80px;position:absolute; "></div>
            </div>
            <div class="one">
                <div class="four" style=" margin: 15px 85px 135px  15px; position: absolute;"></div>
                <div class="three" style=" margin:15px 15px 135px  85px;position:absolute; "></div>
                <div class="three" style=" margin:135px 85px 15px  15px;position:absolute; "></div>
                <div class="four" style=" margin: 135px 15px 15px  85px;position:absolute; "></div>
                <div class="five" style=" margin: 75px 50px 75px  50px;position:absolute; "></div>
            </div>
            <div class="one">
                <div class="three" style=" margin:15px 75px 135px  25px;position:absolute; "></div>
                <div class="three" style=" margin:15px 25px 135px  75px;position:absolute; "></div>
                <div class="five" style=" margin: 85px 75px 65px  25px;position:absolute; "></div>
                <div class="five" style=" margin: 85px 25px 65px  75px;position:absolute; "></div>
                <div class="five" style=" margin: 135px 75px 15px 25px;position:absolute; "></div>
                <div class="five" style=" margin: 135px 25px 15px 75px;position:absolute; "></div>
            </div>
            <div class="one">
                <div class="five" style=" margin: 90px 75px 60px  25px;position:absolute; "></div>
                <div class="five" style=" margin: 90px 25px 60px  75px;position:absolute; "></div>
                <div class="five" style=" margin: 140px 75px 10px 25px;position:absolute; "></div>
                <div class="five" style=" margin: 140px 25px 10px 75px;position:absolute; "></div>
                <div class="six" style=" margin:10px 95px 140px  5px;position:absolute; "></div>
                <div class="six" style=" margin:20px 50px 135px  50px;position:absolute; "></div>
                <div class="six" style=" margin:30px 5px 135px  95px;position:absolute; "></div>
            </div>
            <div class="one">
                <div class="six" style=" margin:10px 24px 145px  76px;position:absolute; "></div>
                <div class="six" style=" margin:10px 76px 145px  24px;position:absolute; "></div>
                <div class="six" style=" margin:55px 24px 100px  76px;position:absolute; "></div>
                <div class="six" style=" margin:55px 76px 100px  24px;position:absolute; "></div>
                <div class="six" style=" margin:100px 24px 55px  76px;position:absolute; "></div>
                <div class="six" style=" margin:100px 76px 55px  24px;position:absolute; "></div>
                <div class="six" style=" margin:145px 24px 10px  76px;position:absolute; "></div>
                <div class="six" style=" margin:145px 76px 10px  24px;position:absolute; "></div>
            </div>
            <div class="one">
                <div class="six" style=" margin:20px 97.5px 135px  7.5px;position:absolute; "></div>
                <div class="six" style=" margin:20px 52.5px 135px  52.5px;position:absolute; "></div>
                <div class="six" style=" margin:20px 7.5px 135px  97.5px;position:absolute; "></div>
                <div class="eight" style=" margin:77.5px 97.5px 77.5px  7.5px;position:absolute; "></div>
                <div class="eight" style=" margin: 77.5px 52.5px 77.5px  52.5px;position:absolute; "></div>
                <div class="eight" style=" margin:77.5px 7.5px 77.5px  97.5px;position:absolute; "></div>
                <div class="nine" style=" margin:135px 97.5px 20px  7.5px;position:absolute; "></div>
                <div class="nine" style=" margin:135px 52.5px 20px  52.5px;position:absolute; "></div>
                <div class="nine" style=" margin:135px 7.5px 20px  97.5px;position:absolute; "></div>
            </div>
        </body>   
</html>
   